<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图js</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    .container {
      position: relative;
      width: 500px;
      height: 300px;
      background-color: skyblue;
      overflow: hidden;
      margin: 50px auto;
    }

    .wrap {
      position: absolute;
      width: 3000px;
      height: 300px;
      background-color: red;
    }

    .wrap img {
      float: left;
      width: 500px;
      height: 300px;
    }

    .container .buttons {
      position: absolute;
      right: 200px;
      bottom: 20px;
      width: 100px;
      height: 10px;
    }

    .container .buttons span {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: yellow;
      text-align: center;
      cursor: pointer;
    }

    .container .buttons span.on {
      background-color: red;
    }

    .arrow {
      position: absolute;
      width: 25px;
      height: 25px;
      background-color: green;
      color: black;
      text-align: center;
      line-height: 25px;
      display: none;
    }

    .arr_left {
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
    }

    .arr_right {
      right: 0;
      top: 50%;
      transform: translate(0, -50%);
    }

    .container:hover .arrow {
      display: block;
    }
  </style>


</head>

<body>
  <div class="container">
    <div class="wrap" style="left: -500px">
      <img src="images/1.jpg" alt="">
      <img src="images/2.jpg" alt="">
      <img src="images/3.jpg" alt="">
      <img src="images/4.jpg" alt="">
      <img src="images/2.jpg" alt="">
      <img src="images/1.jpg" alt="">

    </div>
    <div class="buttons">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </div>

    <a href="javascript:;" class="arrow arr_left"><</a>
    <a href="javascript:;" class="arrow arr_right">></a>
  </div>

  <script>
    // 获取元素
    var wrap = document.querySelector('.wrap');
    var next = document.querySelector('.arr_right');
    var prev = document.querySelector('.arr_left');

    // 给前后箭头绑定事件
    next.onclick = function () {
      next_pic();
    }
    prev.onclick = function () {
      prev_pic();
    }

    function next_pic() {
      var newLeft;
      if (wrap.style.left === '-1500px') {
        newLeft = -1000;
      } else {
        newLeft = parseInt(wrap.style.left) - 500;
      }
      wrap.style.left = newLeft + 'px';

      // 小圆点相关代码
      index++;
      if (index > 3) {
        index = 0;
      }
      showCurrentDot();
    }

    function prev_pic() {
      var newLeft;
      if (wrap.style.left === '0px') {
        newLeft = -1500;
      } else {
        newLeft = parseInt(wrap.style.left) + 500;
      }
      wrap.style.left = newLeft + 'px';

      // 小圆点相关代码
      index--;
      if (index < 0) {
        index = 3;
      }
      showCurrentDot();
    }

    // 自动播放
    var timer = null; // 声明定时器，以便后面可以清除它
    function autoPlay() {
      timer = setInterval(function () {
        next_pic();
      }, 1000)
    }
    autoPlay();

    // 鼠标移到图片时停止自动播放，移开鼠标继续自动播放
    var container = document.querySelector('.container');
    container.onmouseenter = function () {
      clearInterval(timer); // 清除定时器
    }
    container.onmouseleave = function () {
      autoPlay();
    }

    // 底部小圆圈随图片变化而变化
    var index = 0; // 定义index，为每个小圆点和图片对应的索引号
    var dots = document.querySelectorAll('span');
    // 使当前图片对应的小圆点变色
    function showCurrentDot() {
      // 其余小圆点清除类
      for (var i = 0; i < dots.length; i++) {
        dots[i].className = '';
      }
      // 当前小圆点添加类（当前类on有变色效果）
      dots[index].className = 'on';
    }

    // 点击底部小圆点，跳到对应图片
    for (var i = 0; i < dots.length; i++) {
      (function (i) {
        dots[i].onclick = function () {
          var dis = index - i;
          if (index == 3 && parseInt(wrap.style.left) != -2000) {
            dis = dis - 4;
          }
          if (index == 0 && parseInt(wrap.style.left) != -500) {
            dis = 5 + dis;
          }
          wrap.style.left = (parseInt(wrap.style.left) + dis * 500) + 'px';
          index = i;
          showCurrentDot();
        }
      })(i);
    }
  </script>
</body>
</html>


